<script src="http://mykd.99.com/script/plugin/zepto.min.js?v=1"></script>
<div class="mod-sub">
  <span class="btn-bs"></span>
  <ul class="prize">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <!--按钮不可点击时，添加类名“btn-dis”变为灰色-->
  <a href="javascript:;" class="btn-yao" title="我要摇"></a>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none
  }

  .mod-sub {
    background: url(http://img1.91huo.cn/mykd/img/tmp/0420/bg-sub.jpg) no-repeat;
    width: 720px;
    min-height: 900px;
    position: relative;
    transform: scale(0.4);
    transform-origin: 0 0
  }

  .btn-bs {
    width: 30px;
    height: 117px;
    background: url(http://img1.91huo.cn/mykd/img/tmp/0420/bs.png) no-repeat;
    position: absolute;
    left: 656px;
    top: 480px;
    transform-origin: center bottom;
  }

  .btn-bs.active {
    animation: btnBs ease-in 0.3s 2 alternate forwards;
  }

  @keyframes btnBs {
    0% {
      transform: scaleY(1)
    }
    100% {
      transform: scaleY(-0.5)
    }
  }

  .prize li {
    width: 96px;
    height: 102px;
    background-image: url(http://img1.91huo.cn/mykd/img/tmp/0420/icon-prize.png);
    background-repeat: repeat;
    position: absolute;
    top: 529px;
    transition: all 3s 0.5s ease-out
  }

  .prize li:nth-of-type(1) {
    left: 160px
  }

  .prize li:nth-of-type(2) {
    left: 319px;
    transition-delay: 0.6s
  }

  .prize li:nth-of-type(3) {
    left: 480px;
    transition-delay: 0.7s
  }


  .btn-yao,
  .btn-dis {
    width: 470px;
    height: 145px;
    background: url(http://img1.91huo.cn/mykd/img/tmp/0420/btn-yao.png) no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -235px;
    top: 690px
  }

  .btn-dis {
    background-position: 0 -145px
  }
</style>

<script>
  //摇奖
  var total = 5; //奖项个数
  var $btnYao = $(".btn-yao");
  var $btnBs = $(".btn-bs");
  var flag = true; //控制是否可以摇奖
  var arrPos = [0, 0, 0]; //存放当前位置
  var arrNum = [0, 0, 0]; //存放随机数
  var step = 3060; //控制转的步数
  var tempArr;
  var result; //抽奖结果

  //产生随机数
  function getNumb(n) {
    var num = new Array();
    var val;
    for (var i = 0; i < 3; i++) {
      val = Math.floor(Math.random() * n);
      num[num.length] = val;
    }
    return num;
  }

  $btnYao.on("click", function () {
    if (flag == true) {
      flag = false;
      $btnBs.addClass("active");
      $btnBs.on("webkitAnimationEnd", function () {
        $btnBs.removeClass("active");
        $(this).off("webkitAnimationEnd");
      });
      tempArr = arrNum;
      arrNum = getNumb(total);
      $(".prize li").each(function (i) {
        arrPos[i] += -step - ((arrNum[i] - tempArr[i]) <= 0 ? (arrNum[i] - tempArr[i] + total) : (arrNum[i] -
          tempArr[i])) * 102;
        $(this).css("background-position-y", arrPos[i] + "px");
      });
      $(".prize li").eq(2).on("webkitTransitionEnd", function () {
        flag = true; //摇奖结束重置开关
        $(this).off("webkitTransitionEnd");
        //中奖结果处理
        result = arrNum.join("");
        console.log(result);
        if (/0{3}/.test(result)) {
          alert("恭喜中了特等奖");
        } else if (/1{3}|2{3}|3{3}|4{3}/.test(result)) {
          alert("恭喜中了一等奖");
        } else if (/0\d?0/.test(result)) {
          alert("恭喜中了二等奖");
        } else if (/1\d?1|2\d?2|3\d?3|4\d?4/.test(result)) {
          alert("恭喜中了三等奖");
        } else {
          alert("很遗憾没有中奖！");
        }
      });
    }

  })
</script>